<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.sky {
			  height: 480px;
			  background: #007fd5;		
			  position: relative;
			  overflow: hidden;
			  animation-iteration-count: infinite;
			  animation-direction: alternate-reverse; 
			  animation: sky_background 100s ;
			}
			
			/* 分别将三个放云彩的盒子叠放进天空盒子： */
			
			.sky .clouds_one {
			  background: url("../gg/img/cloud_one.png");
			  position: absolute;
			  left: 0;
			  top: 0;
			  height: 100%;
			  width: 300%; 
			  animation:cloud_one 92s ;
			}
			
			.sky .clouds_two {
			  background: url("../gg/img/cloud_two.png");
			  position: absolute;
			  left: 0;
			  top: 0;
			  height: 100%;
			  width: 300%; 
			  animation: cloud_two 70s;
			}
			
			.sky .clouds_three {
			  background: url("../gg/img/cloud_three.png");
			  position: absolute;
			  left: 0;
			  top: 0;
			  height: 100%;
			  width: 300%;
			  animation: cloud_three 70s;
			}
			
/* 			设置动画效果：
			设置填空盒子动画效果：天空有颜色和背景色两层设置，通过这两个颜色的变化来实现天空变化的效果 */
			
			@keyframes sky_background {
			  0% {
				background: #007fd5;
				color: #007fd5
			  }
			  50% {
				background: #000;
				color: #a3d9ff
			  }
			  100% {
				background: #007fd5;
				color: #007fd5
			  }
			}
			
		/* 	兼容性设置： */
			
			@-webkit-keyframes sky_background {
			  0% {
				background: #007fd5;
				color: #007fd5
			  }
			  50% {
				background: #000;
				color: #a3d9ff
			  }
			  100% {
				background: #007fd5;
				color: #007fd5
			  }
			}
			@-moz-keyframes sky_background {
			  0% {
				background: #007fd5;
				color: #007fd5
			  }
			  50% {
				background: #000;
				color: #a3d9ff
			  }
			  100% {
				background: #007fd5;
				color: #007fd5
			  }
			}
			
	/* 		定义三个云朵盒子的动画效果（从屏幕左边向屏幕右侧移动）： */
			@-webkit-keyframes cloud_one {
			  0% {
				  left: 0
			  }
			  100% {
				left: -200%
			  }
			}
			
			@-moz-keyframes cloud_one {
			  0% {
				left: 0
			  }
			  100% {
				left: -200%
			  }
			}
			
			@keyframes cloud_one {
			  0% {
				left: 0
			  }
			
			  100% {
				left: -200%
			  }
			}
			
			@-webkit-keyframes cloud_two {
			  0% {
				left: 0
			  }
			
			  100% {
				left: -200%
			  }
			}
			
			@-moz-keyframes cloud_two {
			  0% {
				left: 0
			  }
			
			  100% {
				left: -200%
			  }
			}
			
			@keyframes cloud_two {
			  0% {
				left: 0
			  }
			
			  100% {
				left: -200%	
			  }	
			}
			
	
			@-webkit-keyframes cloud_three {
			  0% {	
				left: 0		
			  }		
			  100% {		
				left: -200%			
			  }			
			}
			
			@-moz-keyframes cloud_three {			
			  0% {
			
				left: 0			
			  }			
			  100% {			
				left: -200%			
			  }			
			}
			
			@keyframes cloud_three {
			  0% {			
				left: 0
			  }
			  100% {			
				left: -200%
			  }
			}
		</style>
	</head>
	<body>
		<div class="sky">
	<div class="clouds_one"></div>
	<div class="clouds_two"></div>
	<div class="clouds_three"></div>
</div>
	</body>
</html>

